<!--
 * @Descripttion: 注册页
 * @version: 
 * @Author: Bruce
 * @Date: 2020-11-02 14:25:02
 * @LastEditors: Bruce
 * @LastEditTime: 2020-11-18 10:08:18
-->


<template>
	<div class="register">
		<!-- 页头 -->
		<h2 class="page-title">请填写基本信息</h2>

		<!-- 分割线 -->
		<el-divider></el-divider>

		<!-- 表单 -->
		<!-- <form-com ref="form">
			<template v-slot="{ formData }">
				<el-button type="primary" @click="onSubmit('form', formData)" :loading="loading">注册</el-button>
			</template>
		</form-com> -->
		<el-form ref="form" :model="formData" :rules="rules" label-width="140px">
			<el-row :gutter="20" type="flex" justify="center">
				<el-col :span="8">
					<!-- 姓名 -->
					<el-form-item label="姓名" prop="name">
						<el-input v-model="formData.name"></el-input>
					</el-form-item>
		
					<!-- 电话 -->
					<el-form-item label="电话" prop="phone" ref="phone">
						<el-input v-model="formData.phone"></el-input>
					</el-form-item>
					
					
					<!-- 注册按钮 -->
					<el-form-item class="btns">
						<el-button type="primary" @click="onSubmit('form', formData)" :loading="loading">注册</el-button>
					</el-form-item>
				</el-col>
		
			</el-row>
		
		</el-form>
	</div>
</template>

<script>
	import {
		update,
		register,
		wxLogin
	} from "@/api/apiList/user.js";
	export default {
		data() {
			return {
				loading: false,
				openid: "",
				unionid: "",
				isSendCode:true,
				// time:60000,
				num:60,
				formData: {
					//表单数据
					type: Object,
					default: () => ({
						name: "", //姓名
						phone: "", //电话号码
					}),
				},
				rules: {
					//验证规则
					name: [{
						required: true,
						trigger: "blur",
						message: "请输入姓名",
					}, ],
					phone: [{
							required: true,
							trigger: "blur",
							message: "请输入电话号码",
						},
						{
							trigger: "blur",
							pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
							message: "请输入正确的手机号码",
						},
					],
				},
			};
		},
		methods: {
			async API_update(data) {
				//编辑个人信息接口
				let result = {
					data, //更新数据
				};
				return await update(result);
			},
			async API_register(data) { //注册接口
				let result = {
					data
				}
				return await register(result)
			},
			async API_wxLogin(unionid) { //登录
				let result = {
					param: {
						unionid
					}
				}
				return await wxLogin(result)
			},
			onSubmit(formName, formData) {
				//提交

				let newFormData = Object.assign({}, formData, {
					wxuid: this.unionid,
					pcopenid: this.openid,
				})

				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						this.loading = true;
						let res = await this.API_register(newFormData);

						if (res.data.code === 1000) {
							let loginRes = await this.API_wxLogin(this.unionid)

							if (loginRes.data.code === 1000) {
								localStorage.setItem("jwttoken", loginRes.data.data.jwttoken) //存token

								this.$message({
									message: loginRes.data.msg,
									type: 'success'
								});
								this.$router.replace("/home")
							}else{
								this.$message({
									message: loginRes.data.msg,
									type: 'error'
								});
							}
						}else{
							this.$message({
								message: res.data.msg,
								type: 'error'
							})
						}
						this.loading = false;
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		},
		created() {

			if (this.$route.query.isRegister === '0') { //没注册过
				// localStorage.setItem("jwttoken",this.$route.query.token)
				// console.log(this.$route.query.openid)
				// console.log(this.$route.query.unionid)
				this.openid = this.$route.query.openid
				this.unionid = this.$route.query.unionid
			} else if (this.$route.query.isRegister === '1') { //已经注册过
				localStorage.setItem("jwttoken", this.$route.query.token)
				this.$router.replace("/home")
			}
		}
	};
</script>

<style lang="scss" scoped>
	.register {
		.page-title {
			text-align: center;
			margin-top: 24px;
		}

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
</style>
